<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width: 150px;
				height: 300px;
				background: red;
				position: absolute;
				left: -150px;
				top: 50px;
			}
			#box div {
				width: 28px;
				height: 100px;
				background: green;
				position: absolute;
				right: -28px;
				top: 100px;
			}
			#img{
				border: none;
				opacity: 0.3;
				filter: alpha(opactiy:30);
			}
		</style>
	</head>
	<body>
		<input type="button" value="运动" name="yongdong" class="btn"/>
		<div id="box">
			<div></div>
		</div>
		<img src="../../../tz/images/div.png" id="img"/>
		<script type="text/javascript">
			//方法一：
//			window.onload = function(){
//				var btn = document.getElementsByName("yongdong")[0];
//				var oBox = document.getElementById("box");
//				btn.onclick = function(){
//					console.log(11)
//					oBox.style.left = oBox.offsetLeft + 10 +"px";
//				}
//				
//			}
			//方法二：
//			window.onload = function(){
//				var btn = document.getElementsByName('yongdong')[0];
//				var oBox = document.querySelector('#box');
//				var timer = null;
//				function css(obj,attr){
//					if (obj.currentStyle) {
//						return obj.currentStyle[attr];
//					} else{
//						return getComputedStyle(obj,false)[attr];
//					}
//				}
//				btn.onclick = function(){
//					clearInterval(timer);
//					timer = setInterval(function(){
//						if (oBox.offsetLeft>=520) {
//							oBox.style.left = 520 +"px"
//							clearInterval(timer);
//						} else{
//							oBox.style.left = parseInt(css(oBox,'left'))+1+"px"
//						}
//					},100/16)
//				}
//				
//			}
			
			//3.封装运动函数
			 window.onload = function(){
			 	var btn = document.getElementsByClassName('btn')[0];
			 	var oBox = document.getElementById('box');
			 	var timer = null
			 	function animation(obj,target,speed){
			 		clearInterval(timer);
			 		timer = setInterval(function(){
			 			if (obj.offsetLeft>=target) {
			 				obj.style.left = target +"px";
			 				clearInterval(timer);
			 			} else{
			 				obj.style.left = obj.offsetLeft + 1 +'px';
			 			}
			 		},30)
			 	}
			 	btn.onclick = function (){
			 		//animation(oBox,520,1);
			 	}
			 }
			
			
			//4.运用例子
			 
			 window.onload = function(){
			 	var oBox = document.getElementById("box");
			 	var timer = null;
			 	oBox.onmouseover = function(){
			 		animation(oBox,0,10);
			 	}
			 	
			 	oBox.onmouseleave = function(){
			 		animation(oBox,-150,-10)
			 	}
			 	
			 	function animation (obj,target,speed){
			 		clearInterval(timer)
			 		timer = setInterval(function(){
			 			if (obj.offsetLeft==target) {
			 				clearInterval(timer);
			 			} else{
			 				obj.style.left = obj.offsetLeft + speed + "px";
			 			}
			 		},30)
			 	}
			 }
			 
			//5.淡入淡出
			window.onload = function(){
				var oImg = document.getElementById("img");
				var timer = null;
				
				oImg.onmouseleave = function(){
					opacity(oImg,30,-10)
				}
				
				oImg.onmouseover = function(){
					opacity(oImg,100,10)
				}
				
				function css(obj,attr){
					
					if(obj.currentStyle){
					 return	obj.currentStyle[attr];
					}else{
					 return	getComputedStyle(obj,false)[attr];
					}
					
				}
				//console.log(css(oImg,"opacity"));
				function opacity(obj,target,speed){
					var cur = 0;
					timer = setInterval(function(){
						
						cur = css(oImg,"opacity")*100;
						
						if(cur==target){
							clearInterval(timer);
						}else{
							cur+=speed;
							obj.style.opacity = cur / 100;
							obj.style.filter = 'alpha(opacity:'+ cur +')';
						}
					},27)
				}
			}
		</script>
	</body>
</html>
